<template>
  <div class="container">
    <!-- <search /> -->
    <van-search v-model="value" placeholder="请输入搜索关键词" @click="routerLink(`searchPage`)" />
    <div class="cont">
      <van-tree-select :items="items" :main-active-index.sync="activeIndex">
        <template slot="content">
          <div class="tabCon">
            <itemClassfiy v-if="activeIndex === 0" />
          </div>
          <div class="tabCon">
            <itemClassfiy v-if="activeIndex === 1" />
          </div>
        </template>
      </van-tree-select>
    </div>
  </div>
</template>
<script>
import itemClassfiy from '@/components/item/item-classfiy'

export default {
  components: {
    itemClassfiy
    // search
  },
  data() {
    return {
      activeIndex: 0,
      items: [{ text: '庆阳西瓜' }, { text: '庆阳栗子' }]
    }
  },
  methods: {
    routerLink(href) {
      this.$router.push({
        name: href
      })
    }
  }
}
</script>
<style lang="less">
.container {
    width: 100%;
    box-sizing: border-box;
  .search {
    position: relative;
    width: 100%;
    padding:0 3vw 1vw;
    box-sizing: border-box;
    margin: 0 auto;
    height: 35px;
    line-height: 35px;
    display: flex;
    background:#f5f6f8;
    justify-content: space-between;
    align-items: center;
  //   input{
  //     width: 320px;
  //     border: none;
  //     background: #fff;
  //     border-radius: 15px;
  //     padding: 3px 5px;
  //     font-size: 12px;
  //   }
  //   .search-icon{
  //     position: absolute;
  //     top: -4px;
  //     right: 3%;
  //     width: 65px;
  //     img{
  //       width: 100%;
  //     }
  //   }
  }
  .cont {
    width: 100%;
    display: flex;
    margin-top: 8px;
    .menuList {
      width: 25%;
      height: 150vw;
      background: #fff;
      .nav {
        height: 50px;
        line-height: 50px;
        text-align: center;
        // border: 1px solid #000;
      }
    }
    // .tabCon {
    //   height: auto;
    //   width: 100%;
    //   display: flex;
    //   justify-content: space-between;
    //   flex-wrap: wrap;
    //   margin: 0 7px;
    //   height: 150vw;
    //   overflow: scroll;

    //   .tabList {
    //     width: 48%;
    //     // border: 1px solid;
    //     margin: 5px 0;
    //     background: #fff;
    //     .listPic {
    //       width: 144px;
    //       height: 144px;
    //       //   border:1px solid #000;
    //       img {
    //         width: 100%;
    //       }
    //     }
    //     .listName {
    //       font-size: 14px;
    //       color: #000;
    //       font-weight: bol d;
    //       padding: 5px;
    //       width: 95%;
    //     }
    //     .listPrise {
    //       color: #d63a54;
    //       font-size: 16px;
    //       span {
    //         font-size: 20px;
    //       }
    //     }
    //   }
    // }
  }
  .van-sidebar,.van-tree-select__nav{
      max-width: 100px;
  }
  .van-tree-select{
      height: auto !important;
  }
  .van-tree-select__content {
    width: 280px;
}
.van-field__control[type=search] {
    -webkit-appearance: none;
    text-align: center;
}
.van-field__left-icon {
    position: absolute;
    left: 90px;
}
.van-search__content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding-left: 8px;
    background-color: #f7f8fa;
    border-radius: 2px;
    border-radius: 30px;
}
}
</style>

